<template>
  <div>
    <header>
      <nav>
        <div class="dropdown">
          <a href="#">首页</a>
        </div>
        <div class="dropdown">
          <a href="#">论坛</a>
          <div class="dropdown-content">
            <a href="#">科技论坛</a>
            <a href="#">教育论坛</a>
            <a href="#">健康论坛</a>
          </div>
        </div>
        <div class="dropdown">
          <a href="#">活动</a>
          <div class="dropdown-content">
            <a href="#">线上活动</a>
            <a href="#">线下活动</a>
          </div>
        </div>
        <div class="dropdown">
          <a href="#">联系我们</a>
        </div>
        <div class="dropdown">
          <a href="#">学习页</a>
        </div>
        <div class="dropdown">
          <a href="#">考证页</a>
          <div class="dropdown-content">
            <a href="#">计算机</a>
            <a href="#">金融</a>
            <a href="#">英语</a>
          </div>

        </div>
        <div class="dropdown">
          <a href="#">用户反馈</a>
        </div>
        <div class="dropdown">
          <a href="#">发帖</a>
        </div>
      </nav>
    </header>



    <main>


      <div id="posts-container"></div>



      <div class="pagination-container">
        <div class="posts-list">
          <!-- 假设有一个组件或循环来显示paginatedPosts -->
          <div v-for="(post, index) in paginatedPosts" :key="index" class="post">

            <article>
              <!-- 展示帖子内容 -->
              <h2>{{ post.title }}</h2>
              <p>{{ post.summary }}</p>
              <p>作者：{{ post.author }}</p>
              <p>发布时间：{{ post.date }}</p>
              <p>阅读次数：{{ post.reads }}次</p>
              <p>回复数：{{ post.replies }}次</p>

              <p>操作：<a href="#">回复</a> | <a href="#">举报</a>| <a href="#">点赞</a></p>

            </article>

          </div>
        </div>

        <div class="pagination">
          <button
              v-for="page in totalPages"
              :key="page"
              :class="{ 'active': currentPage === page }"
              @click="changePage(page)"
          >
            {{ page }}
          </button>
        </div>
      </div>
    </main>
    <footer>
      <p>版权所有 &copy; 2023 论坛首页</p>
    </footer>
  </div>
</template>


<script>



export default {
  data() {

    return {
      currentPage: 1,
      postsPerPage: 3,
      posts: [
        { title: "这是1篇测试帖子", summary: "这是一篇测试帖子，内容很短，仅供演示。", author: "小明", date: "2023年4月1日", reads: 100, replies: 5, imgSrc: "https://via.placeholder.com/600x400" },
        { title: "这是2篇测试帖子2", summary: "这是一篇测试帖子2，内容很短，仅供演示。", author: "小红", date: "2023年4月2日", reads: 50, replies: 3, imgSrc: "https://via.placeholder.com/600x400" },
        // Add more posts as needed
        { title: "这是3篇测试帖子", summary: "这是一篇测试帖子，内容很短，仅供演示。", author: "小明", date: "2023年4月1日", reads: 100, replies: 5, imgSrc: "https://via.placeholder.com/600x400" },
        { title: "这是4篇测试帖子2", summary: "这是一篇测试帖子2，内容很短，仅供演示。", author: "小红", date: "2023年4月2日", reads: 50, replies: 3, imgSrc: "https://via.placeholder.com/600x400" },
        // Add more posts as needed
        { title: "这是5篇测试帖子", summary: "这是一篇测试帖子，内容很短，仅供演示。", author: "小明", date: "2023年4月1日", reads: 100, replies: 5, imgSrc: "https://via.placeholder.com/600x400" },
        { title: "这是6篇测试帖子2", summary: "这是一篇测试帖子2，内容很短，仅供演示。", author: "小红", date: "2023年4月2日", reads: 50, replies: 3, imgSrc: "https://via.placeholder.com/600x400" },
        // Add more posts as needed
        { title: "这是7篇测试帖子", summary: "这是一篇测试帖子，内容很短，仅供演示。", author: "小明", date: "2023年4月1日", reads: 100, replies: 5, imgSrc: "https://via.placeholder.com/600x400" },
        { title: "这是8篇测试帖子2", summary: "这是一篇测试帖子2，内容很短，仅供演示。", author: "小红", date: "2023年4月2日", reads: 50, replies: 3, imgSrc: "https://via.placeholder.com/600x400" },
        // Add more posts as needed
      ]
    };
  },
  computed: {
    paginatedPosts() {
      const start = (this.currentPage - 1) * this.postsPerPage;
      const end = start + this.postsPerPage;
      return this.posts.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.posts.length / this.postsPerPage);
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    }
  }
};
</script>
<style scoped>
.center-horizontal {
  text-align: center;
}
body {
  background-color:lightblue ;
  color: #333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}
header {
  background-color: #2973B4;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  height: 80px;
  padding: 0 50px;
  position: fixed;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
nav a {

  color: #FFF;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
  text-decoration: none;
  display: block;
}
nav a:hover {
  background-color: lightblue;
  color: #70A8FF;
}
.dropdown {
  position: relative;
  left: 360px;
  position: relative;
  display: inline-block;
}
.dropdown-content {

  display: none;
  position: absolute;
  background-color: #e8eff1;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(89,118,186,1);
  z-index: 1;
}
.dropdown-content a {

  color: lightblue;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {

  background-color: #70A8FF;
}
.dropdown:hover .dropdown-content {
  display: block;
}
main {
  padding-top: 100px;
}
article {
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果需要）*/
  background-color: #E9F7FA;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin: 20px auto;
  padding: 20px;
  width: 94%;
  transition: transform 0.3s;
}
article:hover {
  transform: translateY(-5px);
}
.pagination .page-link:hover {
  background-color: #004F9B;
  color: #fff;
}

.pagination-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 9000px;
  margin: 0 auto;
}

.posts-list {
  margin-bottom: 200px;
}

.post {
  margin-bottom: 15px;
  padding: 10px;
  border: 5px solid lightblue;
  border-radius: 40px;
}

.pagination {
  display: flex;
  justify-content: center;
}

.pagination button {
  margin: 0 15px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #f4f4f4;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination button.active {
  background-color: #4CAF50; /* Green */
  color: white;
  font-weight: bold;
}

.pagination button:hover:not(.active) {
  background-color: #ddd;
}

footer {

  text-align: center;
  padding: 20px 0;
  margin-top: 20px;
  background-color: #f2f2f2;
  color: #666;
  font-size: 14px;
}
</style>
